<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="column">
        <div class="column-left">
            <div class="resize-bar"></div>
            <div class="resize-line"></div>
            <div class="resize-save">
                左侧的内容，左侧的内容，左侧的内容，左侧的内容
            </div>
        </div>
        <div class="column-right">
            右侧的内容，右侧的内容，右侧的内容，右侧的内容
        </div>
    </div>
</body>
<style>
    /* .column {
        overflow: hidden;
    }

    .column-left {
        width: 400px;
        background-color: #fff;
        position: relative;
    }

    .column-right {
        width: 400px;
        padding: 16px;
        background-color: #eee;
        box-sizing: border-box;
        overflow: hidden;
    }

    .resize-save {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 5px;
        left: 0;
        padding: 16px;
        overflow-x: hidden;
    }

    .resize-bar {
        height: 200px;
        width: inherit;
        resize: horizontal;
        cursor: ew-resize;
        opacity: 0;
        overflow: scroll;
    }

    拖拽线
    .resize-line {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        border-bottom: 2px solid #eee;
        border-top: 1px solid #bbb;
        pointer-events: none;
    }

    .resize-bar:hover ~.resize-line,
    .resize-bar:active~.resize-line {
        border-top: 1px dashed skyblue;
    }

    .resize-bar::-webkit-scrollbar {
        height: 200px;
        width: inherit;
    }

    Firefox只有下面一小块区域可以拉伸
    @supports (-moz-user-select: none) {

        .resize-bar:hover~.resize-line,
        .resize-bar:active~.resize-line {
            border-top: 1px solid #bbb;
        }

        .resize-bar:hover~.resize-line::after,
        .resize-bar:active~.resize-line::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            bottom: 0;
            right: -8px;
            background: url(./resize.svg);
            background-size: 100% 100%;
        }
    } */.column {
    overflow: hidden;
}

.column-left {
    height: 400px;
    background-color: #fff;
    position: relative;
    float: left;
}

.column-right {
    height: 400px;
    padding: 16px;
    background-color: #eee;
    box-sizing: border-box;
    overflow: hidden;
}

.resize-save {
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    left: 0;
    padding: 16px;
    overflow-x: hidden;
}

.resize-bar {
    width: 200px;
    height: inherit;
    resize: horizontal;
    cursor: ew-resize;
    opacity: 0;
    overflow: scroll;
}


/* 拖拽线 */

.resize-line {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-right: 2px solid #eee;
    border-left: 1px solid #bbb;
    pointer-events: none;
}

.resize-bar:hover~.resize-line,
.resize-bar:active~.resize-line {
    border-left: 1px dashed skyblue;
}

.resize-bar::-webkit-scrollbar {
    width: 200px;
    height: inherit;
}


</style>

</html>